<template>
    <div class="return" @click="goBack">
        <img src="../../assets/images/teacher/public/arrow-left-bold.svg" alt="">
    </div>
    <div class="container">
        <div class="hintBox">
            <el-alert title="密码修改成功" type="success" class="error" show-icon :closable="false" v-show="changePsd" />
            <el-alert title="原密码错误" type="error" class="error" show-icon :closable="false" v-show="changePsdFail" />
            <el-alert title="手机号修改成功" type="success" class="error" show-icon :closable="false" v-show="changePhone" />
            <el-alert title="手机号修改失败" type="error" class="error" show-icon :closable="false" v-show="changePhoneFail" />
            <el-alert title="验证码发送成功" type="success" class="error" show-icon :closable="false" v-show="sendEmail" />
            <el-alert title="验证码发送失败" type="error" class="error" show-icon :closable="false" v-show="sendEmailFail" />
            <el-alert title="邮箱更换成功" type="success" class="error" show-icon :closable="false" v-show="changeEmail" />
            <el-alert title="邮箱更换失败" type="error" class="error" show-icon :closable="false" v-show="changeEmailFail" />
            <el-alert title="个人信息更新成功" type="success" class="error" show-icon :closable="false"
                v-show="changeIntroduction" />
            <el-alert title="个人信息更新失败" type="error" class="error" show-icon :closable="false"
                v-show="changeIntroductionFail" />
            <el-alert title="密码长度需6-20位" type="warning" show-icon :closable="false" v-show="newPsdReminder" />
        </div>
        <div class="baseInfor">
            <div class="avatar">
                <!-- <img :src="'data:image/png;base64,' + avatar" alt="图片无法显示"> -->
                <el-image style="width: 100%;
    height: 100%;" :src="'data:image/png;base64,' + avatar" :preview-src-list="['data:image/png;base64,' + avatar]"
                    :initial-index="1" />
            </div>
            <div class="information">
                <p class="informationTitle">个人信息</p>
                <div class="inforBox">
                    <div class="inforCon">
                        <p>姓名: <span style="display: inline-block; width: 3%;"></span>{{ userInfor.name }}</p>
                        <p>所属单位:<span style="display: inline-block; width: 3%;"></span>{{ userInfor.school }}{{
                                userInfor.college
                        }}{{ userInfor.major }}
                        </p>
                        <p>电话:<span style="display: inline-block; width: 3%;"></span>{{ userInfor.phone }}</p>
                    </div>
                    <div class="inforCon" style="margin-left: 3%;">
                        <p>身份:<span style="display: inline-block; width: 3%;"></span>{{ userInfor.role }}</p>
                        <p>邮箱账号:<span style="display: inline-block; width: 3%;"></span>{{ userInfor.email }}</p>
                        <p>指导方向:<span style="display: inline-block; width: 3%;"></span>{{ userInfor.guidance }}</p>
                    </div>
                </div>
            </div>
            <div class="changeInfor">
                <!-- <button @click="changeAccount">账户信息</button> -->
                <el-button text @click="dialogVisible1 = true">
                    账户信息
                </el-button>
                <el-dialog v-model="dialogVisible1" title="" top="15%" width="45%" class="changeForm" draggable>
                    <p><span class="accountBox" style="margin-top: 3%;">账号/邮箱号:</span><input type="text"
                            :disabled="changing" v-model="change.email"></p>
                    <p><span class="accountBox">账号/手机号:</span><input type="text" :disabled="changing"
                            v-model="change.phone"></p>
                    <p><span class="accountBox"><button
                                style="width: 110%; height: 2.4em; font-size: 0.8em; margin-right: 2%;"
                                @click="getCaptcha">点击获取邮箱验证码</button></span>:<input type="text" :disabled="changing"
                            v-model="change.captcha" style="width: 45%"></p>
                    <p><span class="accountBox">旧密码:</span><input type="text" name="" id="" :disabled="changing"
                            v-model="change.oldPsd"></p>
                    <p><span class="accountBox">新密码:</span><input type="text" :disabled="changing"
                            v-model="change.newPsd" @focus="showReminder" @blur="newPsdReminder = false"></p>
                    <div class="footerBut">
                        <el-button @click="dialogVisible1 = false"
                            style="background-color: #939393; color: white; font-weight: 400; font-size: 1em;">取消
                        </el-button>
                        <el-button type="primary" @click="dialogVisible1 = false; changeAccount()"
                            style="background-color: #8493a6; color: white; font-weight: 400; font-size: 1em;">
                            确定
                        </el-button>
                    </div>
                    <div @click="changing = false" class="changeBut"><span>修改账户信息</span></div>
                </el-dialog>
                <!-- <button @click="changePersonalData">个人信息</button> -->
                <el-button text @click="dialogVisible2 = true">
                    个人信息
                </el-button>

                <el-dialog v-model="dialogVisible2" title="" width="40%" draggable class="changeForm"
                    style="padding-left: 2%; box-sizing: content-box;">
                    <div class="personalInfoBox">
                        <div class="personalAvatar">
                            <UploadAvatar></UploadAvatar>
                        </div>
                        <div class="personalInfo">
                            <p style="margin-top: 0%;"><span class="accountBox">昵称:</span><input type="text"
                                    v-model="change.nickName" :disabled="changing">
                            </p>
                            <p><span class="accountBox">姓名:</span><input type="text" :disabled="changing"
                                    v-model="change.name"></p>
                            <p><span class="accountBox">指导方向:</span><input type="text" name="" v-model="change.guidance"
                                    id="" :disabled="changing"></p>
                        </div>
                    </div>
                    <div class="footerBut" style="margin-top: 8%; margin-bottom: 8.3%; padding-left: 11%;">
                        <el-button @click="dialogVisible2 = false"
                            style="background-color: #939393; color: white; font-weight: 400; font-size: 1em; width: 39%;">
                            取消
                        </el-button>
                        <el-button type="primary" @click="dialogVisible2 = false; changeBaseInfor()"
                            style="background-color: #8493a6; margin-left: 15%; color: white; font-weight: 400; width: 39%;; font-size: 1em;">
                            确定
                        </el-button>
                    </div>
                    <div @click="changing = false" class="changeBut">
                        <span>修改个人信息</span>
                    </div>
                </el-dialog>
            </div>
        </div>
        <div class="detailData">
            <p>
                <span class="detailTitle">详细信息</span>
                <span>
                    <span class="compile" style="margin-right: 22px" @click="compiling">编辑</span>
                    <span class="compile" @click="saveDetail(); changeBaseInfor()" style="margin-right: 18px;">保存</span>
                </span>
            </p>
            <div class="detailCon">
                <textarea name="detailCon" id="" cols="30" rows="10" :disabled="compile" autofocus
                    style="font-size: 1.19em" v-model="change.introduction" @click="getValue">
            </textarea>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
import { getUserData } from '../../utils';
import axios from 'axios';
import UploadAvatar from '../../components/UploadAvatar.vue';
const router = useRouter();

// 获得用户信息
// 获得用户信息
let userData = ref({
    Token: '',
    avatar: '',
    id: '',
    role: ''
})
if (getUserData() != undefined) {
    userData = getUserData();
}

const goBack = function () {
    router.go(-1);
}

const showPersonalData = function () {

}

//得到用户信息
const userInfor = ref({
    avatar: '',
    college: '',
    email: '',
    isMine: '',
    major: '',
    name: '',
    nickName: '',
    phone: '',
    role: '',
    school: '',
    guidance: '',
    introduction: '12',
})

//可以编辑的信息
const change = ref({
    avatar: '',
    college: '',
    email: '',
    isMine: '',
    major: '',
    name: '',
    nickName: '',
    phone: '',
    role: '',
    school: '',
    guidance: '',
    introduction: '12',
    captcha: '',
    guidance: ''
});
//得到用户信息
const uid = userData.id;
axios({
    headers: {
        'Content-Type': 'application/w-www-form-urlencoded',
        'Token': userData.Token,
    },
    method: 'get',
    url: 'http://api.linwine.space/api/sjk/user/home_page/' + uid,
    responseType: "json",
}).then((data) => {
    let { avatar, college, email, isMine, major, nickName, phone, role, school, name, introduction = '', guidance = '' } = data.data.data;
    userInfor.value.avatar = avatar;
    userInfor.value.college = college
    userInfor.value.email = email
    userInfor.value.isMine = isMine
    userInfor.value.major = major
    userInfor.value.nickName = nickName
    userInfor.value.name = name
    userInfor.value.phone = phone
    userInfor.value.role = role
    userInfor.value.school = school;
    userInfor.value.introduction = introduction;
    userInfor.value.guidance = guidance;
    // 判断身份
    if (userInfor.value.role == 2) {
        userInfor.value.role = '教师'
    }

    // 给可编辑的变量赋初值
    change.value.name = userInfor.value.name
    change.value.nickName = userInfor.value.nickName,
        change.value.email = userInfor.value.email,
        change.value.phone = userInfor.value.phone,
        change.value.introduction = userInfor.value.introduction;
    change.value.avatar = userInfor.value.avatar,
        change.value.oldPsd = '',
        change.value.newPsd = '';
    change.value.guidance = userInfor.value.guidance
    console.log(data.data);
})

// 得到头像
const avatar = ref();
axios({
    headers: {
    },
    method: 'get',
    url: 'http://api.linwine.space/api/sjk/static/avatar/' + userData.avatar,
    responseType: "arraybuffer",
}).then((data) => {
    //将文件流转为64base
    avatar.value = btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ""));
},()=>{
    console.log('error');
})

const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);

//编辑详细信息
const compile = ref(true);
const compiling = function () {
    compile.value = false;
}

//保存编辑详细信息
const saveDetail = function () {
    compile.value = true;
}

//编辑账户信息
//切换到修改状态
//修改昵称，个人简介，指导方向
const changing = ref(true);
const changeIntroduction = ref(false);
const changeIntroductionFail = ref(false)
const changeBaseInfor = function () {
    const data = {
        nickName: change.value.nickName,
        introduction: change.value.introduction,
        guidance: change.value.guidance
    }
    console.log(data);
    axios({
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Token': userData.Token
        },
        url: 'http://api.linwine.space/api/sjk/user/account/update',
        method: 'post',
        data: JSON.stringify(data),
        responseType: 'json'
    }).then((data) => {
        console.log(data);
        if (data.data.code == '200') {
            changeIntroduction.value = true;
            setTimeout(() => {
                changeIntroduction.value = false
            }, 7000)
            router.go(0);
        }
        else {
            changeIntroductionFail.value = true
            setTimeout(() => {
                changeIntroductionFail.value = false
            }, 7000)
        }
    })
}

//输入新密码时的提示信息
const newPsdReminder = ref(false)
const showReminder = function () {
    newPsdReminder.value = true;
    console.log('jin');
    console.log(change.value.newPsd);
    console.log(/^[0-9a-zA-Z]{6,20}$/g.test(change.value.newPsd));
    if (/^[0-9a-zA-Z]{6,20}$/g.test(change.value.newPsd)) {
        newPsdReminder.value = false;
        console.log('goodPsd');
    }
    else {
        newPsdReminder.value = true;
        console.log('badPsd');
    }
}

//改变密码
const changePsd = ref(false)
const changePsdFail = ref(false)
//改变手机号
const changePhone = ref(false)
const changePhoneFail = ref(false)
//改变邮箱
const changeEmail = ref(false)
const changeEmailFail = ref(false)
const changeAccount = function () {
    //改变密码
    if (/^[0-9a-zA-Z]{6,20}$/g.test(change.value.newPsd) && change.value.oldPsd != '') {
        const data = {
            oldPassword: change.value.oldPsd,
            newPassword: change.value.newPsd
        }
        // console.log(data);
        axios({
            headers: {
                'Content-Type': 'application/w-www-form-urlencoded',
                'Token': userData.Token
            },
            url: 'http://api.linwine.space/api/sjk/user/account/reset',
            method: 'post',
            data: JSON.stringify(data),
            responseType: 'json'
        }).then((data) => {
            console.log(data);
            if (data.data.code == '200') {
                changePsd.value = true;
                setTimeout(() => {
                    changePsd.value = false
                }, 7000)
            }
            else if (data.data.code == 400) {
                changePsdFail.value = true
                setTimeout(() => {
                    changePsdFail.value = false
                }, 7000)
            }
        })
    }
    else {
        newPsdReminder.value = true
        setTimeout(() => {
            newPsdReminder.value = false
        }, 7000)
    }

    //换绑手机号
    if (change.value.phone != userInfor.value.phone) {
        const data = {
            phone: change.value.phone
        }
        axios({
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                'Token': userData.Token
            },
            url: 'http://api.linwine.space/api/sjk/user/account/phone/update',
            method: 'post',
            data: JSON.stringify(data),
            responseType: 'json'
        }).then((data) => {
            console.log(data);
            if (data.data.code == '200') {
                changePhone.value = true;
                setTimeout(() => {
                    changePhone.value = false
                }, 5000)
                router.go(0);
            }
            else {
                changePhoneFail.value = true;
                setTimeout(() => {
                    changePhoneFail.value = false
                }, 7000)
            }
        })
    }

    // 换绑邮箱
    if (change.value.email != userInfor.value.email && change.value.captcha != '') {
        const data = {
            email: change.value.email,
            captcha: change.value.captcha
        }
        axios({
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                'Token': userData.Token
            },
            url: 'http://api.linwine.space/api/sjk/user/account/email/update',
            method: 'post',
            data: JSON.stringify(data),
            responseType: 'json'
        }).then((data) => {
            console.log(data);
            if (data.data.code == '200') {
                changeEmail.value = true;
                setTimeout(() => {
                    changeEmail.value = false
                }, 5000)
                router.go(0);
            }
            else {
                changeEmailFail.value = true;
                setTimeout(() => {
                    changeEmailFail.value = false
                }, 7000)
            }
        })
    }
}

//发送验证码
//换绑邮箱,发送验证码
const sendEmail = ref(false)
const sendEmailFail = ref(false)
const getCaptcha = function () {
    if (change.value.email != userInfor.value.email) {
        const sendData = {
            mail: change.value.email
        }
        console.log(sendData);
        axios({
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                'Token': userData.Token
            },
            url: 'http://api.linwine.space/api/sjk/user/account/email/verify?mail=' + sendData.mail,
            method: 'get',
            responseType: 'json'
        }).then((data) => {
            console.log(data);
            if (data.data.code == '200') {
                sendEmail.value = true;
                setTimeout(() => {
                    sendEmail.value = false
                }, 5000)
            }
            else {
                sendEmailFail.value = true;
                setTimeout(() => {
                    sendEmailFail.value = false
                }, 5000)
            }
        })
    }
}

//上传头像

</script>
<style scoped>
.container {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 4%;
    padding-top: 3%;
}

.return {
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    left: 1%;
    top: 1%;
}

.baseInfor {
    width: 99%;
    height: 250px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    box-sizing: content-box;
}

.avatar {
    width: 15.5%;
    height: 209px;
    box-sizing: content-box;
    margin-right: 3.3%;
}

.avatar img {
    width: 100%;
    height: 100%;
}

.information {
    flex: 1;
    box-sizing: content-box;
    padding-left: 1%;
}

.informationTitle {
    font-family: Source Han Sans CN;
    font-size: 1.71em;
    font-weight: 550;
    line-height: 30px;
    letter-spacing: 0px;
    color: #707070;
}

.inforBox {
    justify-content: space-between;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 48%;
    box-sizing: content-box;
    padding-top: 8%;
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    font-weight: normal;
    font-stretch: normal;
    line-height: 34px;
    letter-spacing: 0px;
    color: #707070;
}

.inforCon {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.changeInfor {
    position: absolute;
    width: 27%;
    height: 42px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    right: 0%;
}

.changeInfor button {
    width: 46%;
    height: 100%;
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    border: 0px;
    background-color: #e4e6ea;
    line-height: 100%;
    letter-spacing: 0px;
    color: #6f6f6f;
    border-radius: 6px;
    font-weight: 545;
}

.changeInfor button:hover {
    background-color: #bbb;
    transition: 0.24s;
    cursor: pointer;
}

.changeInfor input {
    border: 0px;
}

.detailData {
    padding-top: 3%;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
}

.detailData p {
    display: flex;
    justify-content: space-between;
    font-family: Source Han Sans CN;
    font-size: 0.7em;
    font-weight: normal;
    font-stretch: normal;
    align-items: flex-end;
}

.detailTitle {
    font-family: Source Han Sans CN;
    font-size: 1.76em;
    font-weight: 550;
    font-stretch: normal;
    line-height: 41px;
    letter-spacing: 0px;
    color: #707070;
}

.compile {
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    color: #8493a6;
    cursor: pointer;
    box-sizing: content-box;
}
.compile:hover{
    color: #a8b3bf;
    transition: 0.2s;
}
.detailCon {
    width: 100%;
    flex: 1;
    margin-top: 1%;
    background-color: white;
}

.detailCon textarea {
    width: 100%;
    height: 100%;
    resize: none;
    outline: none;
    border-radius: 0px;
    border: solid 1px #707070;
    background-color: #ffffff;
    padding: 1.8%;
    padding-left: 2.5%;
    padding-right: 2.7%;
    font-size: 1.16em;
    font-family: Source Han Sans CN;
    color: #707070;
}

.accountBox {
    display: inline-block;
    margin-right: 4%
}

.changeInfor p {
    width: 95%;
}

.changeInfor input {
    width: 65%;
}

.changeForm {
    width: 40%;
    height: 60%;
}

.changeForm p {
    font-size: 1.2em;
    line-height: 2.9em;
    padding-left: 16%;
}

.changeForm input {
    font-size: 0.95em;
    height: 1.5em;
    background-color: white;
    outline: none;
}

.changeForm button {
    width: 40%;
    height: 10%;
    line-height: 1.43em;
}

.footerBut {
    display: flex;
    height: 30%;
    justify-content: space-between;
    margin-top: 7.5%;
    margin-bottom: 5%;
    box-sizing: content-box;
    padding-left: 16.5%;
    padding-right: 14%;
}

.personalAvatar {
    width: 40%;
    max-width: 150px;
    margin-right: -2%;
    background-color: #e1e1e1;
}

.personalAvatar img {
    width: 100%;
    height: 100%;
    max-height: 200px;
}

.personalInfo {
    width: 60%;

}

.personalInfoBox {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    box-sizing: content-box;
    padding-left: 4%;
}

.hintBox {
    top: 4%;
    left: 32%;
    width: 300px;
    position: absolute;
    z-index: 3;
    height: 600px;
}

.changeBut {
    position: absolute;
    bottom: 0px;
    font-family: Source Han Sans CN;
    font-size: 0.9em;
    font-weight: normal;
    font-stretch: normal;
    line-height: 44px;
    letter-spacing: 0px;
    color: #a8b3bf;
    right: 2.5%;
    cursor: pointer;
    margin-top: 4%;
}
.changeBut span{
    font-family: Source Han Sans CN;
    font-size: 0.9em;
    font-weight: normal;
    font-stretch: normal;
    line-height: 44px;
    letter-spacing: 0px;
    color: #a8b3bf;
}
.changeBut span:hover{
    color: #8493a6;
    transition: 0.3s;
    border-bottom: 1px solid #8493a6;
}
</style>
<style>
.el-icon svg {
    color: #707070;
}
</style>